<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1" class="one d1"></div>
    <div id="box2" class="two d1"></div>
    <div id="box3" class="three d1"></div>
    <div id="box4" class="four d1"></div>


    <div>
        <input type="checkbox" name="hobby" value="sing">
        <input type="checkbox" name="hobby" value="dance">
        <input type="checkbox" name="hobby" value="rap">
        <input type="checkbox" name="hobby" value="basketball">
    </div>
</body>
<script>
    // document.getElementById()  对应id名获取元素,返回获取的元素  成功=>元素 失败=> null
    // document.getElementsByClassName()  对应class名获取元素,返回元素的集合  成功 => 数组 失败 -> []  

    // document.getElementsByTagName()    对应标签名获取元素,返回元素的集合  成功 => 数组 失败 -> []  

    // document.getElementsByName()    对应name属性获取元素,返回元素的集合  成功 => 数组 失败 -> []  

    // 如果方法返回的是元素的集合 -> 对应下标获取元素


    
    // var box1 = document.getElementById("box1");
    // console.log(box1);

    // 对应class名获取 四个div 
    // var divList = document.getElementsByClassName("d1");
    // console.log(divList);

    // 对应下标获取元素  取最后一个div
    // console.log(divList[3]);

    // var four = document.getElementsByClassName("four")[0];
    // console.log(four);

     // 对应div名获取 四个div 
    // var divList = document.getElementsByTagName("div");
    // console.log(divList);

    // 对应name获取
    var hobbyList = document.getElementsByName("hobby");
    console.log(hobbyList);

</script>
</html>